<template>
	<view class="app" v-for="item in productsPageData">
		<view class="biaoti">
			<text>{{item.name}}</text>
		</view>
		<view class="a" v-for="shop in item.items">
			<view class="b">
				<image :src="shop.pic" mode="scaleToFill"></image>
			</view>
			<view class="c">
				<view class="d">
					<text class="c1">{{shop.name}}</text>
					<view class="c2" v-for="ags in shop.tags">
						<view class="c2a" v-if="ags.type===2">
							<image :src="ags.tags[0].icon" mode="scaleToFill"></image>
							<text>{{ags.tags[0].title}}</text>
						</view>
					</view>
					<view class="c3" v-if="filteredTags(shop.tags).length">
						<view class="c4" v-for="tag in filteredTags(shop.tags)" :key="tag.title">
							<view class="c4a" :style="{ backgroundColor: tag.background }">
								<text>{{ tag.title }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="c5">
					<text>{{shop.desc}}</text>
				</view>
				<view class="c6">
					<view class="c6a">
						<text class="c6a1">￥<text class="c6a2">{{shop.currentPrice}}</text><text
								class="c6a3">/{{shop.unit}}起</text></text>
					</view>
					<view class="c6b">
						<view class="c6ba">
							<uni-icons type="plusempty" color="black" size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MenuShop",
		props: {
			productsPageData: Object
		},
		mounted() {
			// 在组件挂载后打印 productsPageData
			// console.log("123123", this.productsPageData);
		},
		computed: {
			filteredTags() {
				return (tags) => tags.filter(tag => tag.type === 4).flatMap(tag => tag.tags);
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.app {
		width: 100%;
		display: flex;
		flex-direction: column;

		.a {
			width: 100%;
			height: 200rpx;
			display: flex;
			margin: 20rpx 0;
			font-size: 25rpx;

			.b {
				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 20rpx;
					margin-top: 10rpx;
				}

			}

			.c {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 100%;
				height: 100%;
				padding-left: 15rpx;

				.d {
					.c2 {
						margin: 10rpx 0;

						.c2a {
							width: 90rpx;
							height: 20rpx;
							background-color: rgba(255, 102, 51, 0.08);
							display: flex;
							align-items: center;

							image {
								width: 15rpx;
								height: 15rpx;
							}

							text {
								font-size: 15rpx;
								padding-left: 10rpx;
							}
						}

					}

					.c3 {
						display: flex;
						flex-wrap: wrap;
						margin: 5rpx 0;

						.c4 {
							margin-right: 20rpx;
							font-size: 16rpx;

							.c4a {
								padding: 5rpx;
							}
						}
					}
				}

				.c5 {
					text {
						display: inline-block;
						width: 330rpx;
						font-size: 20rpx;
						color: #999;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 使用省略号表示溢出文本 */
					}
				}

				.c6 {
					display: flex;
					justify-content: space-between;

					.c6a {
						.c6a1 {
							font-size: 25rpx;
						}

						.c6a2 {
							font-size: 30rpx;
						}

						.c6a3 {
							font-size: 22rpx;
							color: #999;
						}
					}

					.c6b {
						.c6ba {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							background-color: #f9dd2e;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}
			}



		}
	}
</style>